<template>
	<view class="percard">
		<canvas v-show='isshow' canvas-id="myCanvas" :style="{ width: canvasWidth, height: canvasHeight }"></canvas>
		<image v-show='!isshow' show-menu-by-longpress="true" :src="imgs" mode=""
			:style="{ width: canvasWidth, height: canvasHeight }"></image>
		<uni-popup ref="popup" type="center">
			<view class="pop1">
				<view class="tit">
					长按图片保存到相册，或直接分享好友
				</view>
				<!-- <view class="btns" @click="saveImage()">点击保存</view> -->
				<view class="btns" @click="closer()">知道了</view>
				<view class="btns" @click="goindex()">返回</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: true,
				myObj: uni.getStorageSync('hbinfo'),
				canvasWidth: 375, //画布宽度
				canvasHeight: 812, //画布高度
				ratio: 0, //计算UI设计稿和你手机的屏幕宽度比例（例如UI设计稿是750宽度 你手机是350宽度 比例就是2  那么你画布画图时候 所有的尺寸大小、宽高、位置、定位左右上下都需要除以 / 比例2 ）
				widths: '',
				heights: '',
				imgs: ''

			}
		},
		watch: {
			imgs(newlue) {
				if (newlue) {
					this.isshow = false
					this.$refs.popup.open()
				}
			}
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success: res => {
					console.log(res);
					// res.screenWidth 设备宽度
					that.canvasWidth = res.screenWidth + 'px'
					that.widths = res.screenWidth
					that.ratio = 750 / res.screenWidth
					that.canvasHeight = (that.widths / 375) * 812 + 'px'
					that.heights = (that.widths / 375) * 812
				}
			})
			uni.showLoading({
				title: '海报生成中...'
			});
			that.drawPageImg()
		},
		methods: {
			closer() {
				this.$refs.popup.close()
			},
			goindex() {
				uni.navigateBack()
			},
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgs,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "已保存到系统相册",
						})
					},
					fail: function(error) {
						uni.showModal({
							title: '提示',
							content: '若点击不授权，将无法使用保存图片功能',
							cancelText: '不授权',
							cancelColor: '#999',
							confirmText: '授权',
							confirmColor: '#f94218',
							success(res) {
								console.log(res)
								if (res.confirm) {
									// 选择弹框内授权
									uni.openSetting({
										success(res) {
											console.log(res.authSetting)
										}
									})
								} else if (res.cancel) {
									// 选择弹框内 不授权
									console.log('用户点击不授权')
								}
							}
						})
					}
				})
			},
			//画一个带圆角矩形
			ctxCircular(ctx, img, x, y, width, height, r, shadow) {
				ctx.beginPath() //开始绘制
				ctx.save() //保存(canvas)状态
				ctx.moveTo(x + r, y)
				ctx.lineTo(x + width - r, y)
				ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				ctx.lineTo(x + width, y + height - r)
				ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5)
				ctx.lineTo(x + r, y + height)
				ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI)
				ctx.lineTo(x, y + r)
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				if (shadow == 1) {
					ctx.shadowBlur = 20; // 模糊效果程度的
					ctx.shadowColor = 'red'; // 阴影颜色
				}
				ctx.clip() //从原始画布中剪切任意形状和尺寸
				// ctx.fill() //对当前路径中的内容进行填充
				ctx.closePath() //关闭一个路径
				ctx.drawImage(img, x, y, width, height);
				ctx.restore() //恢复(canvas)状态
			},
			//画一个矩形也就是整个海报的背景
			ctxRectangle(ctx, x, y, width, height, r, gnt) {
				ctx.beginPath()
				ctx.save() //保存状态
				ctx.moveTo(x + r, y)
				ctx.lineTo(x + width - r, y)
				ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				ctx.lineTo(x + width, y + height - r)
				ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5)
				ctx.lineTo(x + r, y + height)
				ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI)
				ctx.lineTo(x, y + r)
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				ctx.fillStyle = gnt
				ctx.fill() //对当前路径中的内容进行填充
				ctx.closePath() //关闭一个路径
			},
			ctxText(ctx, textFont, textAlign, textFillStyle, textName, x, y) {
				ctx.beginPath()
				ctx.save() //保存状态
				//字体
				ctx.font = textFont,
					//字体样式
					ctx.textAlign = textAlign
				//字体颜色
				ctx.fillStyle = textFillStyle
				//填充字体
				ctx.fillText(textName, x, y)
			},
			ctxTextWrap(ctx, text, x, y, w) {
				//自动换行介绍
				var temp = ""
				var row = []
				let gxqm = ''
				if (text) {
					gxqm = text
				} else {
					gxqm = '未设置个性签名'
				}
				let gexingqianming = gxqm.split("")
				for (var a = 0; a < gexingqianming.length; a++) {
					if (ctx.measureText(temp).width < w) {} else {
						row.push(temp)
						temp = ""
					}
					temp += gexingqianming[a]
				}
				row.push(temp)
				ctx.font = "13px arail"
				ctx.textAlign = 'left';
				ctx.fillStyle = "#000000"
				for (var b = 0; b < row.length; b++) {
					ctx.fillText(row[b], x, y + (b + 1) * 20)
				}
			},
			// 使用画布绘制页面
			drawPageImg() {
				let _this = this
				// 生成画布
				const ctx = uni.createCanvasContext('myCanvas')
				// 绘制背景
				const bcg = ctx.createLinearGradient(0, 0, _this.widths, 0)
				bcg.addColorStop(0.2, '#C9DAFF')
				bcg.addColorStop(1, '#3F7CFF')

				const bcg1 = ctx.createLinearGradient(0, 0, 690 / _this.ratio, 1220 / _this.ratio)
				bcg1.addColorStop(0.4, '#E8EFFF')
				bcg1.addColorStop(1, '#ffffff')

				_this.ctxRectangle(ctx, 0, 0, (_this.widths), (_this.heights), 0, bcg)
				_this.ctxRectangle(ctx, 30 / _this.ratio, 176 / _this.ratio, 690 / _this.ratio, 1220 / _this.ratio, 10,
					bcg1)
				ctx.strokeStyle = '#ffffff'
				ctx.stroke()
				ctx.drawImage('../../static/tit.png', //图像资源
					(64 / _this.ratio), //图像的左上角在目标canvas上 X 轴的位置
					(220 / _this.ratio), //图像的左上角在目标canvas上 Y 轴的位置
					(224 / _this.ratio), //在目标画布上绘制图像的宽度
					(45 / _this.ratio) //在目标画布上绘制图像的高度
				)
				_this.ctxRectangle(ctx, 60 / _this.ratio, 292 / _this.ratio, 630 / _this.ratio, 220 / _this.ratio, 10,
					'#ffffff')
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'姓名', 80 / _this.ratio, 370 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.customerName, 176 / _this.ratio, 370 / _this.ratio)

				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'电话', 80 / _this.ratio, 415 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.customerPhone, 176 / _this.ratio, 415 / _this.ratio)

				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'分类', 80 / _this.ratio, 465 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.customerType, 176 / _this.ratio, 465 / _this.ratio)


				_this.ctxCircular(ctx, `../../static/img/${_this.myObj.productType + _this.myObj.mouthType}.png`, (504 / _this.ratio), (308 / _this.ratio), (160 / _this
						.ratio),
					(160 / _this.ratio), 10)
				_this.ctxText(ctx,
					'normal 10px Arial,PingFang SC',
					'left',
					'#C9C9C9',
					'模型展示', 544 / _this.ratio, 500 / _this.ratio)


				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'材质', 60 / _this.ratio, 570 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.productType, 220 / _this.ratio, 570 / _this.ratio)

				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'封口类型', 60 / _this.ratio, 630 / _this.ratio)

				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.mouthType, 220 / _this.ratio, 630 / _this.ratio)

				if (_this.myObj.mouthType == '魔术贴') {
					_this.ctxText(ctx,
						'normal 14px Arial,PingFang SC',
						'left',
						'#000000',
						_this.myObj.magicSize, 320 / _this.ratio, 630 / _this.ratio)
				}

				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'尺寸', 60 / _this.ratio, 690 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					`长:${_this.myObj.sizeLong}cm`, 220 / _this.ratio, 690 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					`宽:${_this.myObj.sizeWidth}cm`, 340 / _this.ratio, 690 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					`高:${_this.myObj.sizeHeight}cm`, 460 / _this.ratio, 690 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'商品数量', 60 / _this.ratio, 750 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.productCount, 220 / _this.ratio, 750 / _this.ratio)
					
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'克重', 340 / _this.ratio, 750 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					`${_this.myObj.gram}g`, 420 / _this.ratio, 750 / _this.ratio)
						
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'布', 60 / _this.ratio, 810 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.buCode ? _this.myObj.buCode : '无', 220 / _this.ratio, 810 / _this.ratio)

				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'铝', 60 / _this.ratio, 870 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.lvCode ? _this.myObj.lvCode : '无', 220 / _this.ratio, 870 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'切边', 60 / _this.ratio, 930 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.cutType, 220 / _this.ratio, 930 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'包装要求', 60 / _this.ratio, 990 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.packageCode, 220 / _this.ratio, 990 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'印刷版数', 60 / _this.ratio, 1050 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.printingCount, 220 / _this.ratio, 1050 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'其他费用', 60 / _this.ratio, 1110 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.addPrice, 220 / _this.ratio, 1110 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'税点', 60 / _this.ratio, 1170 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.taxCode, 220 / _this.ratio, 1170 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#979797',
					'打包体积', 60 / _this.ratio, 1230 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myObj.volume+'m³', 220 / _this.ratio, 1230 / _this.ratio)

				ctx.moveTo(60 / _this.ratio, 1260 / _this.ratio);
				ctx.lineTo(690 / _this.ratio, 1260 / _this.ratio);
				ctx.strokeStyle = '#F5F5F5'
				ctx.stroke();

				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					'最终单价(元)', 60 / _this.ratio, 1315 / _this.ratio)
				_this.ctxText(ctx,
					'normal 12px Arial,PingFang SC',
					'left',
					'#FF1919',
					'含税', 226 / _this.ratio, 1315 / _this.ratio)
				_this.ctxText(ctx,
					'normal bold 20px Arial,PingFang SC',
					'right',
					'#FF1919',
					` ￥${_this.myObj.sellPrice} `, 690 / _this.ratio, 1315 / _this.ratio)
				_this.ctxText(ctx,
					'normal 14px Arial,PingFang SC',
					'left',
					'#000000',
					'版费(元)', 60 / _this.ratio, 1365 / _this.ratio)

				_this.ctxText(ctx,
					'normal bold 20px Arial,PingFang SC',
					'right',
					'#FF1919',
					` ￥${_this.myObj.editionAmount} `, 690 / _this.ratio, 1365 / _this.ratio)
				_this.ctxText(ctx,
					'normal 15px Arial,PingFang SC',
					'left',
					'#ffffff',
					'长按识别小程序码，使用兴一报价', 30 / _this.ratio, 1480 / _this.ratio)
				ctx.drawImage('../../static/logo.png', //图像资源
					(30 / _this.ratio), //图像的左上角在目标canvas上 X 轴的位置
					(1510 / _this.ratio), //图像的左上角在目标canvas上 Y 轴的位置
					(222 / _this.ratio), //在目标画布上绘制图像的宽度
					(56 / _this.ratio) //在目标画布上绘制图像的高度
				)
				_this.ctxCircular(ctx, '../../static/1.jpg', (566 / _this.ratio), (1420 / _this.ratio), (154 / _this
						.ratio),
					(154 / _this.ratio), 4)
				// 渲染画布
				ctx.draw(false, (() => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							destWidth: _this.canvasWidth * 2, //展示图片尺寸=画布尺寸1*像素比2
							destHeight: _this.canvasHeight * 2,
							quality: 1,
							fileType: 'jpg',
							success: (res) => {
								uni.hideLoading()
								console.log('通过画布绘制出的图片--保存的就是这个图', res.tempFilePath)
								_this.imgs = res.tempFilePath
								// _this.$refs.popup.open()
							},
							fail: function(error) {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: "绘制图片失败", // res.tempFilePath
								})
							}
						}, _this)

					}, 100)
				})())
			},

		}
	}
</script>
<style lang="scss">
	.pop1 {
		background-color: #fff;
		width: 520rpx;
		padding: 38rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.tit {
			font-size: 32rpx;
			color: #000000;
			margin: 20px 0px;
		}

		.btns {
			width: 300rpx;
			font-size: 28rpx;
			background-color: #196AEB;
			color: #fff;
			border-radius: 14rpx;
			padding: 14rpx 30rpx;
			text-align: center;
			margin: 30rpx auto;
		}
	}
</style>